import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import styles from './popconfirm.less';
import VtxPopconfirm from '../components/vtxPopconfirm';
import {Icon,Button,Switch,message,Input } from 'antd';
function Popconfirm({dispatch,popconfirm}) {
  const {visible,condition} =popconfirm;

  function confirm(e) {
    console.log(e);
    message.success('Click on Yes');
  }

  function cancel(e) {
    console.log(e);
    message.error('Click on No');
  }

  function visibleConfirm(e) {
    dispatch({
      type:'popconfirm/fetch',payload:{visible:false}
    })
    message.success('Next step.');
  }

  function visibleCancel(e) {
    dispatch({
      type:'popconfirm/fetch',payload:{visible:false}
    })
    message.success('Click on cancel.');
  }
  //弹窗款显隐
  function handleVisibleChange(visible){
    console.log(visible)
    if(!visible){
      dispatch({
        type:'popconfirm/fetch',payload:{visible}
      })
      return;
    }
    if (condition) {
      visibleConfirm();  // next step
    } else {
      dispatch({
        type:'popconfirm/fetch',payload:{visible}
      })
    }
  }
  function changeCondition(val){
    dispatch({
      type:'popconfirm/fetch',payload:{condition:val}
    })
  }
  const renderTitle=(txt,val)=>{
    return(
      <div>
        <p style={{marginBottom:'15px'}}>{txt}</p>
        <Input placeholder="Basic usage" value={val}/>
      </div>
    )
  }
  return (
    <div className={styles.normal}>
      <ul>
        <li> 
          <p>基本用法。</p>
          <VtxPopconfirm title="Are you sure delete this task?" onConfirm={confirm} onCancel={cancel} okText="Yes" cancelText="No">
            <a>删除</a>
          </VtxPopconfirm>
        </li>
        <li> 
          <p>按钮及内容取默认值。</p>
          <VtxPopconfirm onConfirm={confirm} onCancel={cancel}>
            <a>删除</a>
          </VtxPopconfirm>
        </li>
        <li> 
          <p>自定义按钮文字。</p>
          <VtxPopconfirm title="自定义文字?" onConfirm={confirm} onCancel={cancel} okText="是的" cancelText="不是">
            <a>删除</a>
          </VtxPopconfirm>
        </li>
        <li> 
          <p>提示框的12个方位。</p>
          <div style={{ marginLeft:65, whiteSpace: 'nowrap' }}>
            <VtxPopconfirm title="Are you sure?" onConfirm={confirm} okText="Yes1" cancelText="No1">
              <Button>TL</Button>
            </VtxPopconfirm>
            <VtxPopconfirm placement="top" title="Are you sure?" onConfirm={confirm} okText="Yes" cancelText="No">
              <Button>Top</Button>
            </VtxPopconfirm>
            <VtxPopconfirm placement="topRight" title="Are you sure?" onConfirm={confirm} okText="Yes" cancelText="No">
              <Button>TR</Button>
            </VtxPopconfirm>
          </div>
          <div style={{ width: 70, float: 'left' }}>
            <VtxPopconfirm placement="leftTop" title="Are you sure?" onConfirm={confirm} okText="Yes" cancelText="No">
              <Button>LT</Button>
            </VtxPopconfirm>
            <VtxPopconfirm placement="left" title="Are you sure?" onConfirm={confirm} okText="Yes" cancelText="No">
              <Button>Left</Button>
            </VtxPopconfirm>
            <VtxPopconfirm placement="leftBottom" title="Are you sure?" onConfirm={confirm} okText="Yes" cancelText="No">
              <Button>LB</Button>
            </VtxPopconfirm>
          </div>
          <div style={{ width: 70, marginLeft: 265 }}>
            <VtxPopconfirm placement="rightTop" title="Are you sure?" onConfirm={confirm} okText="Yes" cancelText="No">
              <Button>RT</Button>
            </VtxPopconfirm>
            <VtxPopconfirm placement="right" title="Are you sure?" onConfirm={confirm} okText="Yes" cancelText="No">
              <Button>Right</Button>
            </VtxPopconfirm>
            <VtxPopconfirm placement="rightBottom" title="Are you sure?" onConfirm={confirm} okText="Yes" cancelText="No">
              <Button>RB</Button>
            </VtxPopconfirm>
          </div>
          <div style={{ marginLeft: 65, clear: 'both', whiteSpace: 'nowrap' }}>
            <VtxPopconfirm placement="bottomLeft" title="Are you sure?" onConfirm={confirm} okText="Yes" cancelText="No">
              <Button>BL</Button>
            </VtxPopconfirm>
            <VtxPopconfirm placement="bottom" title="Are you sure?" onConfirm={confirm} okText="Yes" cancelText="No">
              <Button>Bottom</Button>
            </VtxPopconfirm>
            <VtxPopconfirm placement="bottomRight"  onConfirm={confirm} okText="Yes" cancelText="No">
              <Button>BR</Button>
            </VtxPopconfirm>
          </div>
        </li>
        <li> 
          <p>设置了 arrowPointAtCenter 后，箭头指向目标元素中心。</p>
          <VtxPopconfirm placement="topLeft" title="Are you sure?" onConfirm={confirm} okText="Yes" cancelText="No">
            <Button>Align edge / 边缘对齐</Button>
          </VtxPopconfirm>
          <VtxPopconfirm placement="topLeft" title={"Are you sure?"} arrowPointAtCenter ={true} onConfirm={confirm} okText="Yes" cancelText="No">
            <Button>Arrow points to center / 箭头指向中心</Button>
          </VtxPopconfirm>
        </li>
        <li> 
          <p>条件触发，是否需要弹出。</p>
          <VtxPopconfirm title="Are you sure delete this task?"
            visible={visible} onVisibleChange={handleVisibleChange}
            onConfirm={visibleConfirm} onCancel={visibleCancel}
          >
            <a href="#">Delete a task</a>
          </VtxPopconfirm>
          <br/>
          Whether directly execute：<Switch defaultChecked onChange={changeCondition} />
        </li>
        <li> 
          <p>弹出框内容可以是复杂的dom结构</p>
          <VtxPopconfirm placement="bottomRight" title={()=>renderTitle('请填写相关理由：','你好')} onConfirm={confirm} okText="Yes" cancelText="No">
            <Button>自定义弹窗内容</Button>
          </VtxPopconfirm>
        </li>
      </ul>
    </div>
  );
}

Popconfirm.propTypes = {
};

export default connect(
  ({popconfirm})=>({popconfirm})
)(Popconfirm);
